<template>
    <view class="bg-white">
        <view v-for="(item_attr_list, item_category_name, item_attr_category_i) in item_attr_category" :key="item_attr_category_i">
            <view>{{item_category_name}}</view>
            <view class="padding-bottom-30">
                <button @tap="itemAttrCheckbox(item_attr_name, item_attr_category_i + 1)" class='cu-btn shadow padding-lr-20 text-13'
                    style="min-width: 29.333333%; margin: 20rpx 2% 0 2%;" v-for="(item_attr_checkbox, item_attr_name, item_attr_i) in item_attr_list"
                    :key="item_attr_i" :class="checkbox['attr_checkbox_value_'+(item_attr_category_i+1)]==item_attr_name?'bg-nddyny':''"
                    :style="checkbox['attr_checkbox_value_'+(item_attr_category_i+1)]==item_attr_name?'':'color: #666'"
                    :disabled="item_attr_checkbox">{{item_attr_name}}</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['data', 'itemAttrChange', 'is_force_update'],
        data() {
            return {
                attr_key_1: '',
                attr_key_2: '',
                attr_key_3: '',
                item_attr_list: {},

                checkbox: {
                    attr_checkbox_value_1: '',
                    attr_checkbox_value_2: '',
                    attr_checkbox_value_3: '',
                    item_attr_change_category: null,
                }
            };
        },
        methods: {
            itemAttrCheckbox(attr_name, attr_category_i) {
                this.checkbox['attr_checkbox_value_' + attr_category_i] =
                    this.checkbox['attr_checkbox_value_' + attr_category_i] == attr_name ? '' : attr_name;
                // 当前选择的内容
                const attr_checkbox_value_1 = this.checkbox.attr_checkbox_value_1;
                const attr_checkbox_value_2 = this.checkbox.attr_checkbox_value_2;
                const attr_checkbox_value_3 = this.checkbox.attr_checkbox_value_3;
                // 如果 checkbox_disabled 值等于 false，则说明用户啥都没选
                const checkbox_disabled = (
                    !attr_checkbox_value_1 &&
                    !attr_checkbox_value_2 &&
                    !attr_checkbox_value_3
                ) ? false : null;
                let attr_category = this.checkbox.item_attr_change_category || this.item_attr_category;
                // 如果用户啥都没选，则全部按钮的值设置为false, 否则设置为null然后进行后面的操作
                Object.keys(attr_category).forEach(key1 => {
                    Object.keys(attr_category[key1]).forEach(key2 => {
                        this.$set(attr_category[key1], key2, checkbox_disabled);
                    });
                });
                let item_attr_info = null;
                // 判断用户是不是啥都没选
                if (checkbox_disabled !== false) {
                    // 保存其它的属性有什么可选的值
                    let attr_change_list_1 = {};
                    let attr_change_list_2 = {};
                    let attr_change_list_3 = {};
                    if (this.attr_key_1 && this.attr_key_2 && this.attr_key_3) {
                        // 3属性
                        attr_change_list_1 = {
                            1: [],
                            2: []
                        };
                        attr_change_list_2 = {
                            0: [],
                            2: []
                        };
                        attr_change_list_3 = {
                            0: [],
                            1: []
                        };
                        Object.keys(this.item_attr_list).forEach(keys_string => {
                            const keys_array = keys_string.split('`|,');
                            if (attr_checkbox_value_1 && keys_array[0] === attr_checkbox_value_1) {
                                attr_change_list_1[1].push(keys_array[1]);
                                attr_change_list_1[2].push(keys_array[2]);
                            }
                            if (attr_checkbox_value_2 && keys_array[1] === attr_checkbox_value_2) {
                                attr_change_list_2[0].push(keys_array[0]);
                                attr_change_list_2[2].push(keys_array[2]);
                            }
                            if (attr_checkbox_value_3 && keys_array[2] === attr_checkbox_value_3) {
                                attr_change_list_3[0].push(keys_array[0]);
                                attr_change_list_3[1].push(keys_array[1]);
                            }
                        });
                    } else if (this.attr_key_1 && this.attr_key_2) {
                        // 2属性
                        attr_change_list_1 = {
                            1: []
                        };
                        attr_change_list_2 = {
                            0: []
                        };
                        Object.keys(this.item_attr_list).forEach(keys_string => {
                            const keys_array = keys_string.split('`|,');
                            if (attr_checkbox_value_1 && keys_array[0] === attr_checkbox_value_1) {
                                attr_change_list_1[1].push(keys_array[1]);
                            }
                            if (attr_checkbox_value_2 && keys_array[1] === attr_checkbox_value_2) {
                                attr_change_list_2[0].push(keys_array[0]);
                            }
                        });
                    } else if (this.attr_key_1) {
                        // 1属性
                    }
                    // 只选了1
                    if (attr_checkbox_value_1 && !attr_checkbox_value_2 && !attr_checkbox_value_3) {
                        Object.keys(attr_category[this.attr_key_1]).forEach(key => {
                            attr_category[this.attr_key_1][key] = false;
                        });
                        Object.keys(attr_change_list_1).forEach(key1 => {
                            attr_change_list_1[key1].forEach(key2 => {
                                attr_category[this['attr_key_' + (key1 * 1 + 1)]][key2] = false;
                            });
                        });
                    }
                    // 只选了2
                    if (!attr_checkbox_value_1 && attr_checkbox_value_2 && !attr_checkbox_value_3) {
                        Object.keys(attr_category[this.attr_key_2]).forEach(key => {
                            attr_category[this.attr_key_2][key] = false;
                        });
                        Object.keys(attr_change_list_2).forEach(key1 => {
                            attr_change_list_2[key1].forEach(key2 => {
                                attr_category[this['attr_key_' + (key1 * 1 + 1)]][key2] = false;
                            });
                        });
                    }
                    // 只选了3
                    if (!attr_checkbox_value_1 && !attr_checkbox_value_2 && attr_checkbox_value_3) {
                        Object.keys(attr_category[this.attr_key_3]).forEach(key => {
                            attr_category[this.attr_key_3][key] = false;
                        });
                        Object.keys(attr_change_list_3).forEach(key1 => {
                            attr_change_list_3[key1].forEach(key2 => {
                                attr_category[this['attr_key_' + (key1 * 1 + 1)]][key2] = false;
                            });
                        });
                    }
                    // 选了1 2
                    if (attr_checkbox_value_1 && attr_checkbox_value_2 && !attr_checkbox_value_3) {
                        const array_1 = attr_change_list_2[0];
                        const array_2 = attr_change_list_1[1];
                        array_1.forEach(key => {
                            attr_category[this.attr_key_1][key] = false;
                        });
                        array_2.forEach(key => {
                            attr_category[this.attr_key_2][key] = false;
                        });
                        if (this.attr_key_1 && this.attr_key_2 && this.attr_key_3) {
                            const array_3 = this.$nddyny.array.intersect(attr_change_list_1[2], attr_change_list_2[2]);
                            array_3.forEach(key => {
                                attr_category[this.attr_key_3][key] = false;
                            });
                            array_1.forEach(key1 => {
                                array_2.forEach(key2 => {
                                    array_3.forEach(key3 => {
                                        if (key1 === attr_checkbox_value_1 &&
                                            key2 === attr_checkbox_value_2) {
                                            let key = key1 + '`|,' + key2 + '`|,' + key3;
                                            if (!this.item_attr_list[key]) {
                                                attr_category[this.attr_key_3][key3] = true;
                                            }
                                        }
                                    });
                                });
                            });
                        } else {
                            array_1.forEach(key1 => {
                                array_2.forEach(key2 => {
                                    if (key1 === attr_checkbox_value_1) {
                                        if (!this.item_attr_list[key1 + '`|,' + key2]) {
                                            attr_category[this.attr_key_2][key2] = true;
                                        }
                                    }
                                });
                            });
                        }
                    }
                    // 选了1 3
                    if (attr_checkbox_value_1 && !attr_checkbox_value_2 && attr_checkbox_value_3) {
                        const array_1 = attr_change_list_3[0];
                        const array_2 = this.$nddyny.array.intersect(attr_change_list_1[1], attr_change_list_3[1]);
                        const array_3 = attr_change_list_1[2];
                        array_1.forEach(key => {
                            attr_category[this.attr_key_1][key] = false;
                        });
                        array_2.forEach(key => {
                            attr_category[this.attr_key_2][key] = false;
                        });
                        array_3.forEach(key => {
                            attr_category[this.attr_key_3][key] = false;
                        });
                        array_1.forEach(key1 => {
                            array_2.forEach(key2 => {
                                array_3.forEach(key3 => {
                                    if (key1 === attr_checkbox_value_1 &&
                                        key3 === attr_checkbox_value_3) {
                                        let key = key1 + '`|,' + key2 + '`|,' + key3;
                                        if (!this.item_attr_list[key]) {
                                            attr_category[this.attr_key_2][key2] = true;
                                        }
                                    }
                                });
                            });
                        });
                    }
                    // 选了2 3
                    if (!attr_checkbox_value_1 && attr_checkbox_value_2 && attr_checkbox_value_3) {
                        const array_1 = this.$nddyny.array.intersect(attr_change_list_2[0], attr_change_list_3[0]);
                        const array_2 = attr_change_list_3[1];
                        const array_3 = attr_change_list_2[2];
                        array_1.forEach(key => {
                            attr_category[this.attr_key_1][key] = false;
                        });
                        array_2.forEach(key => {
                            attr_category[this.attr_key_2][key] = false;
                        });
                        array_3.forEach(key => {
                            attr_category[this.attr_key_3][key] = false;
                        });
                        array_1.forEach(key1 => {
                            array_2.forEach(key2 => {
                                array_3.forEach(key3 => {
                                    if (key2 === attr_checkbox_value_2 &&
                                        key3 === attr_checkbox_value_3) {
                                        let key = key1 + '`|,' + key2 + '`|,' + key3;
                                        if (!this.item_attr_list[key]) {
                                            attr_category[this.attr_key_1][key1] = true;
                                        }
                                    }
                                });
                            });
                        });
                    }
                    // 选了1 2 3
                    if (attr_checkbox_value_1 && attr_checkbox_value_2 && attr_checkbox_value_3) {
                        const array_1 = this.$nddyny.array.intersect(attr_change_list_2[0], attr_change_list_3[0]);
                        const array_2 = this.$nddyny.array.intersect(attr_change_list_1[1], attr_change_list_3[1]);
                        const array_3 = this.$nddyny.array.intersect(attr_change_list_1[2], attr_change_list_2[2]);
                        array_1.forEach(key => {
                            attr_category[this.attr_key_1][key] = false;
                        });
                        array_2.forEach(key => {
                            attr_category[this.attr_key_2][key] = false;
                        });
                        array_3.forEach(key => {
                            attr_category[this.attr_key_3][key] = false;
                        });
                        array_1.forEach(key1 => {
                            array_2.forEach(key2 => {
                                array_3.forEach(key3 => {
                                    if (key1 === attr_checkbox_value_1 &&
                                        key2 === attr_checkbox_value_2) {
                                        let key = key1 + '`|,' + key2 + '`|,' + key3;
                                        if (!this.item_attr_list[key]) {
                                            attr_category[this.attr_key_3][key3] = true;
                                        }
                                    }
                                    if (key1 === attr_checkbox_value_1 &&
                                        key3 === attr_checkbox_value_3) {
                                        let key = key1 + '`|,' + key2 + '`|,' + key3;
                                        if (!this.item_attr_list[key]) {
                                            attr_category[this.attr_key_2][key2] = true;
                                        }
                                    }
                                    if (key2 === attr_checkbox_value_2 &&
                                        key3 === attr_checkbox_value_3) {
                                        let key = key1 + '`|,' + key2 + '`|,' + key3;
                                        if (!this.item_attr_list[key]) {
                                            attr_category[this.attr_key_1][key1] = true;
                                        }
                                    }
                                });
                            });
                        });
                    }
                    Object.keys(attr_category).forEach(key3 => {
                        Object.keys(attr_category[key3]).forEach(key4 => {
                            if (attr_category[key3][key4] === null) {
                                this.$set(attr_category[key3], key4, true);
                            }
                        });
                    });
                    let item_attr_select_key = '';
                    if (attr_checkbox_value_1) item_attr_select_key += attr_checkbox_value_1;
                    if (attr_checkbox_value_2) item_attr_select_key += '`|,' + attr_checkbox_value_2;
                    if (attr_checkbox_value_3) item_attr_select_key += '`|,' + attr_checkbox_value_3;
                    item_attr_info = this.item_attr_list[item_attr_select_key];
                }
                this.$set(this.checkbox, 'item_attr_change_category', attr_category);
                this.itemAttrChange(
                    attr_checkbox_value_1, attr_checkbox_value_2, attr_checkbox_value_3,
                    item_attr_info
                );
            }
        },
        computed: {
            item_attr_category() {
                if (!this.is_force_update && this.checkbox.item_attr_change_category) {
                    return this.checkbox.item_attr_change_category;
                } else {
                    this.$emit('update:is_force_update', false);
                    this.checkbox.attr_checkbox_value_1 = '';
                    this.checkbox.attr_checkbox_value_2 = '';
                    this.checkbox.attr_checkbox_value_3 = '';
                    this.$set(this.checkbox, 'item_attr_change_category', null);
                }

                let item_info = this.data.item_info;
                let _item_attr_list = this.data.item_attr_list_bak || this.data.item_attr_list;
                this.attr_key_1 = item_info.attr_key_1;
                this.attr_key_2 = item_info.attr_key_2;
                this.attr_key_3 = item_info.attr_key_3;

                let item_attr_category = {};
                let item_attr_list = {};

                // 商品属性 - 类型列表
                if (this.attr_key_1) {
                    item_attr_category[this.attr_key_1] = {};
                    if (this.attr_key_2) {
                        item_attr_category[this.attr_key_2] = {};
                        if (this.attr_key_3) {
                            item_attr_category[this.attr_key_3] = {};
                        }
                    }
                }

                // 商品属性 - 属性列表
                item_attr_list = {};
                _item_attr_list.forEach(item_attr_info => {
                    let attr_value_123 = '';
                    let attr_value_1 = item_attr_info.attr_value_1;
                    let attr_value_2 = item_attr_info.attr_value_2;
                    let attr_value_3 = item_attr_info.attr_value_3;

                    if (this.attr_key_1) {
                        attr_value_123 += attr_value_1;
                        if (!item_attr_category[this.attr_key_1][attr_value_1]) {
                            item_attr_category[this.attr_key_1][attr_value_1] = false;
                        }
                        if (this.attr_key_2) {
                            attr_value_123 += '`|,' + attr_value_2;
                            if (!item_attr_category[this.attr_key_2][attr_value_2]) {
                                item_attr_category[this.attr_key_2][attr_value_2] = false;
                            }
                            if (this.attr_key_3) {
                                attr_value_123 += '`|,' + attr_value_3;
                                if (!item_attr_category[this.attr_key_3][attr_value_3]) {
                                    item_attr_category[this.attr_key_3][attr_value_3] = false;
                                }
                            }
                        }
                    }
                    item_attr_list[attr_value_123] = item_attr_info;
                });

                // 用于展示选择到的属性信息
                this.$set(this, 'item_attr_list', item_attr_list);
                // 用于循环展示属性按钮
                return item_attr_category;
            }
        },
    }
</script>
